import React, { Component } from 'react';
import { BrowserRouter, HashRouter, Route, Switch, NavLink, Redirect } from 'react-router-dom'  //引入路由
import Home from '../page/Home'
import My from '../page/My'
import Car from '../page/Car'
/**
 * 1. 路由模式  包裹所有的路由组件
 *  1-1 历史模式  BrowserRouter
 *  1-2 哈希模式  HashRouter
 * 2. Route 它最基本的职责是在路径与当前URL匹配时渲染指定的UI组件。
 *    2-1 属性path 和 当前url 发生匹配的时候，会替换成对应的组件
 *    2-2 属性component  替换的组件
 *    2-3 属性 exact 精确匹配
 * 3. Switch 被包裹的路由只会渲染第一个匹配到的，后续不在匹配
 * 4. NavLink  切换路由
 *    4-1 to='字符串'  切换的路由的路径
 *    4-2 to={{ pathname: '切换路由路径', search: '查询字符串', hash: '锚点' }}  切换的路由的路径
 * 5. Redirect 路由重定向
 *    5-1 from 从哪里来
 *    5-2 to   去哪里
 */
class Index extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          {/* 切换路由 */}
          <NavLink to="/home">首页</NavLink>
          <NavLink to={{ pathname: '/car'}}>购物车</NavLink>
          <NavLink to="/my">我的</NavLink>
        </div>
        <Switch>
          <Route path="/home" exact>
            <Home></Home>
          </Route>
          <Route path="/my" component={My} exact></Route>
          <Route path="/car" component={Car} exact></Route>
          <Redirect from="/" to="/home"></Redirect>
        </Switch>
      </BrowserRouter>
    );
  }
}


export default Index;
